<script setup lang="ts">
const props = withDefaults(defineProps<{
  headless?: boolean
  hasPadding?: boolean
  active: boolean
  title: string
  titleEn: string
  morePath?: string
}>(), {
  headless: false,
  hasPadding: true,
})

const router = useRouter()

function onMore() {
  if (props.morePath)
    router.push(props.morePath)
}
</script>

<template>
  <section class="flex flex-col" :class="{ 'px-[190px]': hasPadding, 'max-md:px-[20px]': hasPadding }" h="screen" relative v-bind="$attrs">
    <div v-if="!headless" pt="[110px] max-md:[60px]" flex="~" justify="between" class="items-center" :class="{ 'px-[190px]': !hasPadding, 'max-md:px-[20px]': !hasPadding }">
      <div v-show="active" class="animate-fade-in-left font-sans uppercase home-animate">
        <h3 text="[42px] max-md:[20px]" class="text-[#1F1F1F] opacity-[0.2]">
          {{ titleEn }}
        </h3>
        <h3 text="[34px] max-md:[18px]" m="t-[-16px] max-md:t-[-4px]">
          {{ title }}
        </h3>
      </div>
      <div v-show="active" class="flex flex-col animate-fade-in-right home-animate" text="[18px] right  max-md:[16px]" @click="onMore">
        <div class="uppercase">
          More
        </div>
        <img src="~/assets/img/icon_arrow_right_lg.png" class="h-[20px] w-[80px] max-md:h-auto max-md:w-[40px]" />
      </div>
    </div>
    <div flex="1">
      <slot />
    </div>
  </section>
</template>
